<template>
  <fy-table
    :table-data="tableData"
    :columns="columns"
    title="单选表格"
    selection="single"
    @row-click="onRowClick"
    v-model:selected="selected"
  />
</template>

<script setup>
import { ref } from 'vue'
import FyTable from 'components/common/FyTable/index.vue'

const selected = ref([])

const tableData = ref([
  { id: 1, name: '张三', department: '研发部', position: '前端工程师' },
  { id: 2, name: '李四', department: '产品部', position: '产品经理' },
  { id: 3, name: '王五', department: '设计部', position: 'UI设计师' },
  { id: 4, name: '赵六', department: '运营部', position: '运营专员' },
])

const columns = [
  {
    name: 'name',
    label: '姓名',
    field: 'name',
    align: 'left',
  },
  {
    name: 'department',
    label: '部门',
    field: 'department',
    align: 'center',
  },
  {
    name: 'position',
    label: '职位',
    field: 'position',
    align: 'left',
  },
]

const onRowClick = (row) => {
  console.log('选中行:', row)
}
</script>
